參考出處 JS 30 DAY 29

參考出處 Alex 宅幹嘛

今天要練習，怎麼做倒數計時

實作

在畫面上可以看到，有輸入框跟按鈕，兩邊我們都要綁事件。

做完後，我們在接著做倒數計時

Button

先對全部的 button 做監聽，再把它 forEach 出來。
const sec = parseInt(this.dataset.time) 這裏，因為 console.log 出來是字串，我們要把它換成數字，所以加上 parse

 const buttons = document.querySelectorAll('.timer__controls > button')
  
  buttons.forEach( button => button.addEventListener('click',setTimer))
  
   function setTimer(){
    const sec = parseInt(this.dataset.time)
    startTimer(sec)
  }

輸入框 input

在 value 的部分，我們可以從 name:minutes 拿到 value。

接著再下判斷，如果是 value 我們才讓他過。

document.querySelector('#custom').addEventListener('submit',function(e){
    e.preventDefault()
    const value = parseInt(this.minutes.value)
    if (value){
      startTimer(value*60)
      this.reset()
    }
  })
  

倒數計時

先確認好，上下單位是不是一致的，我們這裡用的是 “ 秒 ”，再來我們做一個計時器就可以了。

let timer
  
  const timeLeft = document.querySelector('.display__time-left')
  const endTime = document.querySelector('.display__end-time')
  
  const startTimer = function(sec){
    clearInterval(timer)
    //拿現在的時間
    const now = Date.now()
    //結束的時間，1000 是 1000 毫秒
    const end = now + sec * 1000
    
    //倒數計時
    
    timer = setInterval(function(){
      const secLeft = Math.floor((end - Date.now())/1000)
      
      if (secLeft >=0){
        //無條件捨去看有幾分鐘
      const displayMin = Math.floor(secLeft/60)
      //算剩多少秒
      let displaySec = secLeft % 60
      displaySec = displaySec <10 ? "0" + displaySec : displaySec
      timeLeft.innerText = `${displayMin}:${displaySec}`
      }else{
        clearInterval(timer)
      }
      
    },16)
    
    //顯示最後時間
    const endDate = new Date(end)
    let hour = endDate.getHours()
    let min = endDate.getMinutes()
    //補0
    min = min < 10 ? "0"+min : min
    endTime.innerText = `Back at ${hour}:${min}`
  }

以上，明天見